<template>
	<div class="Reg">
		<header><i class="iconfont icon-xiangzuo1"  @click="goPrev"></i><span>注册</span></header>
		<div class="container">
			<div class='regContainer'>
			  	<div class='regInfo'>
			  		<p><span>个人信息</span></p>
			    	<div><span>手机号</span><input  readonly  v-model='cellphone'></input></div>
			    	<div><span>姓名</span><input placeholder='必填'   ref="userName"   @keyup.enter="getFocus('password')"     v-model='userName'></input><i v-if="userName" @click="clearInput('userName')" class="iconfont icon-iconfontcuowu"></i></div>
			    	<div><span>密码</span><input placeholder='必填'   ref="password"   @keyup.enter="getFocus('IDCardNum')"    v-model='password'></input><i v-if="password" @click="clearInput('password')" class="iconfont icon-iconfontcuowu"></i></div>
			    	<div><span>身份证号</span><input placeholder='必填'   ref="IDCardNum"   @keyup.enter="getFocus('vicheNo')"    v-model='IDCardNum'></input><i v-if="IDCardNum" @click="clearInput('IDCardNum')" class="iconfont icon-iconfontcuowu"></i></div>
			    	<p><span>车辆信息</span></p>
			    	<div><span>车牌号</span><input placeholder='必填'   ref="vicheNo"   @keyup.enter="getFocus('vehicleLength')"    v-model='vicheNo'></input><i v-if="vicheNo" @click="clearInput('vicheNo')" class="iconfont icon-iconfontcuowu"></i></div>
				    <div @click='TypeOfCar'><span>车型</span><div><span>{{vehicleType}}</span><i class="iconfont icon-xiangshang"></i></div></div>
				    <div><span>车长（米）</span><input placeholder='车长' type="number"   ref="vehicleLength"   @keyup.enter="getFocus('vehicleWide')"    v-model='vehicleLength'></input><i v-if="vehicleLength.length" @click="clearInput('vehicleLength')" class="iconfont icon-iconfontcuowu"></i></div>
				    <div><span>车宽（米）</span><input placeholder='车宽'  type="number"    ref="vehicleWide"   @keyup.enter="getFocus('vehicleHeight')"    v-model='vehicleWide'></input><i v-if="vehicleWide.length" @click="clearInput('vehicleWide')" class="iconfont icon-iconfontcuowu"></i></div>
				    <div><span>车高（米）</span><input placeholder='车高'  type="number"   ref="vehicleHeight"   @keyup.enter="getFocus('maxLoadWeight')"    v-model='vehicleHeight'></input><i v-if="vehicleHeight.length" @click="clearInput('vehicleHeight')" class="iconfont icon-iconfontcuowu"></i></div>
				    <div><span>载重（吨）</span><input placeholder='必填'  type="number"    ref="maxLoadWeight"   @keyup.enter="getFocus('maxLoadVolumn')"    v-model='maxLoadWeight'></input><i v-if="maxLoadWeight.length" @click="clearInput('maxLoadWeight')"  class="iconfont icon-iconfontcuowu"></i></div>
				    <div><span>载重体积(方)</span><input placeholder='必填' type="number"   ref="maxLoadVolumn"   @keyup.enter="regBtn"    v-model='maxLoadVolumn'></input><i v-if="maxLoadVolumn" @click="clearInput('maxLoadVolumn')" class="iconfont icon-iconfontcuowu"></i></div>
					<p><span>上传资料</span></p>
					<div class="uploadImg">
						<div class="LoadImg_head">身份证正面照片</div>
						<div>
							<el-upload  :action="HOST+'registerUploadPicture.do'"  :limit="2" :multiple="true"  :data="uploadParams" ref='upload_info1' :auto-upload="false" list-type="picture-card"  :before-upload="beforeUpload"   :on-error="uploadError" :on-success="uploadSuccess"   :on-preview="handlePictureCardPreview" >
							  <i class="el-icon-plus"></i>
							</el-upload>
							<el-dialog :visible.sync="dialogVisible">
							  <img width="100%" :src="dialogImageUrl" alt="">
							</el-dialog>
						</div>
					</div>
					<div class="uploadImg">
						<div class="LoadImg_head">身份证反面照片</div>
						<div>
							<el-upload  :action="HOST+'registerUploadPicture.do'"   :limit="2" :multiple="true"  :data="uploadParams" ref='upload_info2' :auto-upload="false" list-type="picture-card"  :before-upload="beforeUpload"   :on-error="uploadError" :on-success="uploadSuccess"   :on-preview="handlePictureCardPreview" >
							  <i class="el-icon-plus"></i>
							</el-upload>
							<el-dialog :visible.sync="dialogVisible">
							  <img width="100%" :src="dialogImageUrl" alt="">
							</el-dialog>
						</div>
					</div>
					<div class="uploadImg">
						<div class="LoadImg_head">驾驶证照片</div>
						<div>
							<el-upload  :action="HOST+'registerUploadPicture.do'"   :limit="3" :multiple="true"  :data="uploadParams" ref='upload_info3' :auto-upload="false" list-type="picture-card"  :before-upload="beforeUpload"   :on-error="uploadError" :on-success="uploadSuccess"   :on-preview="handlePictureCardPreview" >
							  <i class="el-icon-plus"></i>
							</el-upload>
							<el-dialog :visible.sync="dialogVisible">
							  <img width="100%" :src="dialogImageUrl" alt="">
							</el-dialog>
						</div>
					</div>
					<div class="uploadImg">
						<div class="LoadImg_head">行驶证照片</div>
						<div>
							<el-upload  :action="HOST+'registerUploadPicture.do'"   :limit="3" :multiple="true"  :data="uploadParams" ref='upload_info4' :auto-upload="false" list-type="picture-card"  :before-upload="beforeUpload"   :on-error="uploadError" :on-success="uploadSuccess"   :on-preview="handlePictureCardPreview" >
							  <i class="el-icon-plus"></i>
							</el-upload>
							<el-dialog :visible.sync="dialogVisible">
							  <img width="100%" :src="dialogImageUrl" alt="">
							</el-dialog>
						</div>
					</div>
			  	</div>
			  	<div class="g_signBtn" @click='regBtn'>注册</div>
			</div>
			<div v-if="ifTips" class="msg_tips">
				<div class="tips_content">
					<i class="iconfont icon-chenggong1"></i>
					<p>{{tips_Msg}}</p>
				</div>
			</div>
			<div class="SelectMeng"   v-if="typeMShow">
				<div class="SelectWarehouses" >
					<div class="SelectTitle">请选择车型</div>
					<div class="SelectItem">
						<div @click="SelectComit(index)"  v-for='(dataItem,index) in typeOfCarList'  :id="index"  :key='index'>{{dataItem.description}}</div>
					</div>
					<div class="cancel"   @click="selectCancel('e')">取消</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default {
		name: 'Reg',
		data() {
			return {
				typeMShow: false,
				cellphone: '', // 上个页面传来的手机号
				userName: '', // 姓名
				password: '', // 密码
				IDCardNum: '', // 身份证号码
				vicheNo: '', // 车牌号
				vehicleType: '请选择', // 车型
				vehicleType_code: '', // 车型代码
				vehicleLength: '', // 车长
				vehicleWide: '', // 车宽
				vehicleHeight: '', // 车高
				maxLoadWeight: '', // 载重重量
				maxLoadVolumn: '', // 载重体积
				tips_Msg: '', // 提示信息
				ifTips: false, // 提示信息是否显示
				typeOfCarList: [], // 车型列表
				dialogImageUrl: '',
		        dialogVisible: false, // 是否放大预览照片
		        uploadParams: {} // 上传图片时 额外的参数
			}
		},
		mounted() {
			this.$refs['userName'].focus();
		},
		created() {
			let that = this;
			this.cellphone = this.$route.query.phoneNum;
			// 上传照片时附带的参数
			this.uploadParams.cellphone = this.cellphone; // 电话号码
		    if (this.$store.state.typeOfCarList.length) {
		        this.typeOfCarList = that.$store.state.typeOfCarList;
		    } else {
		        let requestData = { 
					listName: 'TMS-客户指定车型',
					tenantCode: 'SFKC',
				};
	            this.httpRequest('queryCodeLukupData.do',requestData,function(res){
	            	that.typeOfCarList = res.data;
				    that.$store.state.typeOfCarList = res.data;
	            })
		    }
		},
		methods: {
			goPrev() {
				this.$router.push({
					name: 'Identifying',
					query: {
						page: 'Reg'
					}
				})
			},
			 // 点击 注册 按钮
			regBtn() {
			    let that = this;
			    if (!(that.userName && that.password  && that.IDCardNum && that.vicheNo && that.maxLoadWeight && that.maxLoadVolumn)) {
			    	that.$alert('请输入必填项', '提示', {
				        confirmButtonText: '确定',
				   	})
				   	return ;
			    } else if (!that.vehicleType_code) {
			    	that.$alert('请选择车型', '提示', {
				        confirmButtonText: '确定',
				   	})
				   	return ;
			    } else if (that.password.length<6) {
			      	that.$alert('密码不能小于六位数', '提示', {
				        confirmButtonText: '确定',
				   	})
				   	return;
			    } else {
			    	// 上传图片
			    	this.$refs.upload_info1.submit();
					this.$refs.upload_info2.submit();
					this.$refs.upload_info3.submit();
					this.$refs.upload_info4.submit();
			      	let params = {
			          loginname: '', // 备用字段
			          username: that.userName, // 司机姓名
			          idNo: that.IDCardNum, // 身份证号码
			          password: that.password, // 密码
			          cellphone: that.cellphone, // 手机号
			          vicheNo: that.vicheNo, // 车牌号
			          vehicleType: that.vehicleType_code, // 车型
			          vehicleLength: that.vehicleLength, // 长
			          vehicleWide: that.vehicleWide, // 宽
			          vehicleHeight: that.vehicleHeight, // 高
			          maxLoadWeight: that.maxLoadWeight, // 载重重量
			          maxLoadVolumn: that.maxLoadVolumn // 载重体积
			        };
			        that.httpRequest('registerAppUser.do',params,function(res){
			        	that.ifTips = true;
						that.tips_Msg = res.Msg;
						setTimeout(function(){
							that.ifTips = false;
							that.toLogin();
						},1500)
			        })
			    }
			},
			// 预览放大图片
			handlePictureCardPreview(file) {
			    this.dialogImageUrl = file.url;
			    this.dialogVisible = true;
			},
			// 点击 车辆车型列表出现
			TypeOfCar() {
			    this.typeMShow = true;
			},
			// 选择类型   确认具体车辆车型
			SelectComit(index) {
				this.typeMShow = false;
			    this.vehicleType = this.typeOfCarList[index].description;
			    this.vehicleType_code = this.typeOfCarList[index].code;
			}
		}
	}
</script>
<style lang="less" scoped>
	.Reg{overflow: hidden;
		.regContainer{
			&>.regInfo{
				&>div{
					position: relative;
				    width:100%;
				    padding: 20/50rem 30/50rem;
				    box-sizing: border-box;
				    overflow: hidden;
				    font-size: 28/50rem;
				    border-bottom: 1/50rem solid #EDEDED;
				    &>span{
					    float: left;
					    width: 170/50rem;
					    height: 50/50rem;
					    line-height: 50/50rem;
					}
					&>input{
						width: 500/50rem;
					    float: left;
					    border: none;
					}
					&>div{
					    float: right;
					    color: #7A7A7A;
					    line-height: 50/50rem;
					    i{
					    	margin-left: 10/50rem;
					    }
					}
				}
				&>p{
					width: 100%;
					height: 80/50rem;
					line-height: 80/50rem;
					background-color: #f0f0f0;
					span{
						float: left;
						margin-left: 30/50rem;
					}
					i{
						font-size: 50/50rem;
						float: right;
						margin-right: 30/50rem;
					}
				}
				&>div.uploadImg{
					div{
						float: none;
					}
					span{
						float: none;
						color: #aaa;
					}
				}
			}
			.g_signBtn{
				margin-bottom: 40/50rem;
			}
			&>button{
			    width:690/50rem;
			    color: #fff;
			    background-color: #ff681d;
			    font-size: 28/50rem;
			    margin-top: 50/50rem;
			}
		}
	}
	@media screen and (max-width: 374px){
	  	.Reg{
			.regContainer{
				&>.regInfo{
					&>div{
					    border-bottom: 3/50rem solid #EDEDED;
					}
				}
			}
		}
	}
</style>